<template>
  <div id="centerLeft">
    <div class="left-content01">
      <div class="content01-hander">
        来信总量与办结

        <button
          @click="showChart('TpEcharts')"
          :class="{ active: activeChart === 'TpEcharts' }"
        >
          来信总量趋势
        </button>
        <button
          @click="showChart('VisitorEcharts1')"
          :class="{ active: activeChart === 'VisitorEcharts1' }"
        >
          案件处理
        </button>
      </div>
      <div class="content-item">
        <div class="content-item-right">
          <ShoppIng v-if="activeChart === 'VisitorEcharts1'"></ShoppIng>
          <ShoppIngA v-if="activeChart == 'TpEcharts'"></ShoppIngA>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ShoppIng from "./ShoppIng.vue";
  import ShoppIngA from "./ShoppIngA.vue";

  export default {
    data() {
      return {
        activeChart: "TpEcharts",
        left_content02: [],
        detail: false,
      };
    },
    components: {
      ShoppIng,
      ShoppIngA,
    },
    created() {
      this.fetchData();
    },
    mounted() {},
    methods: {
      showChart(chartType) {
        this.activeChart = chartType;
      },
      flow() {
        this.detail = true;
        this.title = "来信情况";
      },
      close() {
        this.detail = false;
      },
      async fetchData() {
        try {
          const response = await this.$axios.get("/api/screen/volumeHandling");
          this.left_content02 = response.data.data.left_content02;
        } catch (error) {
          console.error(error);
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  $box-width: 532px;
  $box-height: 294px;

  #centerLeft {
    position: relative;
    height: $box-height;
    width: $box-width;

    .left-content01 {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-image: url("/public/imgs/FourBgc.png");
      background-repeat: no-repeat;
      background-size: cover;
    }

    .content01-hander {
      background: linear-gradient(to bottom, #ffffff, #97cdff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      height: 48px;
      font-family: Adobe Heiti Std;
      font-weight: 600;
      font-size: 20px;
      color: #ffffff;
      display: flex;
      align-items: center;
      color: #fff;
      padding-left: 60px;
      line-height: 56px;
      button {
      width: 80px;
      height: 20px;
      color: #d8f0ff;
      text-align: center;
      text-shadow: 0px 0px 4px #0091ff, 0px 0px 10px #0091ff;
      font-family: "PingFang SC";
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px;
      border-radius: 3px;
      margin-left: 15px;
      cursor: pointer;
      border: 1px solid rgba(30, 123, 214, 0.22);
      background: linear-gradient(180deg, rgba(15, 74, 159, 0.00) 0%, rgba(17, 75, 160, 0.95) 137.5%);

      &.active {
        /* background-image: url("../../../public/imgs/choosebutton.png"); */
      border: 1px solid rgba(30, 123, 214, 1) !important;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
    }

    .content-item-right {
      margin-left: 20px;
      width: 520px;
      height: 240px;
    }
  }
</style>
